<template>
  <div class="modal-form-container">
    <vuescroll :ops="ops">
      <Form class="mr10 ml10" ref="info" :model="data" :label-width="100" :rules="rules">
        <FormItem label="VIN" prop="vin">
          <Input v-model="data.vin" />
        </FormItem>
        <FormItem :label="$t('M0SWlK7GRCyXb6WvRMZgb')" prop="carnum">
          <Input v-model="data.carnum" />
        </FormItem>
        <FormItem :label="$t('Dl_XYXdSr6xhI9rMZwbLh')" prop="nickname">
          <Input v-model="data.nickname" />
        </FormItem>
        <FormItem :label="$t('R50mHX0LambJk39x8cmq6')" prop="remarks">
          <Input v-model="data.remarks" type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save">{{$t('q-FETLOZVSMbWnrNq0vj6')}}</Button>
          <Button style="margin-left: 8px" @click="close">{{$t('2LFpg56tAgKyBB40xpv5l')}}</Button>
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import { addStationCarnum, updateStationCarnum } from '@/api/data2'

export default {
  name: 'vin_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object,
    status: String
  },
  data () {
    return {
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      rules: {
        vin: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        carnum: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        nickname: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        remarks: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }]
      }
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    async save () {
      this.$refs.info.validate(async valid => {
        if (valid) {
          const data = this.data
          const { code, desc } =
            this.status === 'new'
              ? await addStationCarnum({ ...data })
              : await updateStationCarnum({ ...data })
          if (code == 200) {
            this.$emit('success', desc)
          } else {
            this.$emit('fail', desc)
          }
        }
      })
    }
  }
}
</script>
